<template>
	<view>
		<!-- 轮播图 -->
		<swiper style="height: 160px;" indicator-dots autoplay circular interval="2000">
			<swiper-item v-for="(img, idx) in bannerList" :key="idx">
				<image :src="img" style="width:100%;height:160px;object-fit:cover;" />
			</swiper-item>
		</swiper>

		<!-- 任务中心分组列表（每组一个uni-section） -->
		<uni-section title="任务中心" type="line">
			<uni-collapse v-model="activeNames">
				<uni-collapse-item v-for="group in taskList" :title="group.title" :key="group.id" :name="group.id">
					<uni-list v-if="group.paperItems && group.paperItems.length">
						<uni-list-item v-for="item in group.paperItems" :title="item.examPaperName" :key="item.examPaperId"
							showArrow />
					</uni-list>
					<view v-else style="padding: 16px; color: #888;">暂无任务</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-section>

		<!-- 固定试卷 -->
		<uni-section title="固定试卷" type="line">
			<uni-list>
				<uni-list-item v-for="paper in fixedPaper" :title="paper.name" :key="paper.id">
					<template #footer>
						<view @click.stop="goToTest()" style="padding:0 10px;display:flex;align-items:center;cursor:pointer;">
							<uni-icons type="arrowright" size="22" color="#bbb" />
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import http from '../../http.js'
const bannerList = ref([
	'/static/swiper/lyy01.jpg',
	'/static/swiper/lyy02.jpg',
	'/static/swiper/xcm01.jpg',
	'/static/swiper/xcm02.jpg',
])
const taskList = ref([])
const fixedPaper = ref([])
const activeNames = ref([])
function goToWrongBook() {
	uni.navigateTo({ url: '/pages/wrongbook/wrongbook' })
}
function goToTest() {
	uni.navigateTo({ url: '/pages/test/test' })
}
async function fetchHomeData() {
	console.log('fetchHomeData called')
	const [taskRes, dashRes] = await Promise.all([
		http({ url: '/student/dashboard/task', method: 'post' }),
		http({ url: '/student/dashboard/index', method: 'post' })
	])
	console.log('任务中心数据', taskRes)
	if (taskRes && Array.isArray(taskRes.response)) {
		taskList.value = taskRes.response
	}
	if (dashRes && dashRes.response) fixedPaper.value = dashRes.response.fixedPaper || []
}
onMounted(() => {
	console.log('onMounted called')
	fetchHomeData()
})
</script>

<style scoped>
.container {
	background: #fafbfc;
	min-height: 100vh;
}

.navbar {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.icon.more {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon.circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #222;
}

.banner-box {
	width: 100%;
	background: #f8f5e7;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 0 8px 0;
}

.banner-swiper {
	width: 80vw;
	height: 120px;
	border-radius: 10px;
	overflow: hidden;
	background: #f8f5e7;
}

.banner {
	width: 80vw;
	height: 120px;
	border-radius: 10px;
	object-fit: cover;
	background: #f8f5e7;
}

.dots {
	display: flex;
	justify-content: center;
	margin-top: 8px;
	gap: 6px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e0e0e0;
}

.dot.active {
	background: #222;
}

.section {
	margin-top: 18px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	padding: 0 0 8px 0;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #444;
	padding: 12px 16px 8px 16px;
}

.list {
	display: flex;
	flex-direction: column;
}

.list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: 15px;
	color: #222;
	border-bottom: 1px solid #f5f5f5;
}

.list-item:last-child {
	border-bottom: none;
}

.arrow {
	color: #bbb;
	font-size: 18px;
}
</style>
